/**
 * 1. React 中没有 Attr 的概念，才是 Prop
 * 2. React 中没有全局组件的概念。
 *
 * Props:
 *    1. 无需声明，直接传递即可
 *
 * 获取 Props
 *    1. 类组件，通过 this.props 获取
 *    2. 函数组件，函数的第一个参数就是 props
 *
 */

import React from "react";

class Hello extends React.Component {
  render(): React.ReactNode {
    console.log("Hello this", this);
    console.log("Hello Props", this.props);

    const { name, age, children } = this.props;

    return (
      <div>
        {children}

        <button>
          Hello, {name}, {age}
        </button>

        {children}
      </div>
    );
  }
}

function World(props) {
  console.log("World this", this); // undefined
  console.log("World Props", props);
  return (
    <div>
      {props.children}
      <button>
        World, {props.name}, {props.age}
      </button>
      {props.children}
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>App</h1>
      <Hello name="张三" age={18}>
        <p>我的天</p>
      </Hello>

      <hr />
      <World name="张三" age={18}>
        <p>我的天</p>
      </World>
    </div>
  );
}

export default App;
